<!DOCTYPE html>
<html lang = "en">
<head>
    <meta charset = "UTF-8">
    <title>Title</title>

    <!--=====================================================================-->
    <script>
        //多物体运动,通过设置多个timer来实现timer不冲突

        window.onload = function () {
            let aDiv = document.getElementsByClassName('div');

            for (let i = 0; i < aDiv.length; i++) {
                let oDiv = aDiv[i];
                let currentWidth = oDiv.offsetWidth;
                aDiv[i].timer = null;               //没做到警告,可以给一对象添加一个自定义的属性,比如timer!

                oDiv.onmouseenter = function () {
                    clearInterval(aDiv[i].timer);
                    // growthDiv(oDiv,300);
                    changeDiv(oDiv,currentWidth,300,'width');       //通过渐变框架也可以实现
                };

                oDiv.onmouseleave = function () {
                    clearInterval(aDiv[i].timer);
                    // growthDiv(oDiv,currentWidth);
                    changeDiv(oDiv,oDiv.offsetWidth,currentWidth,'width');

                };
            }

            //具体增长div的实现,denominator分母,越大div的变化越慢
            function growthDiv(oDiv,targetVal,denominator = 5) {
                oDiv.timer = setInterval(function () {  //因为在每个oDiv种都设置了timer属性所以这里可以使用!而不是再去外部获取timer了

                    let currentVal = oDiv.offsetWidth;

                    //如果没有到目标值就继续变化div
                    if (currentVal !== targetVal) {

                        //设定速度,如果目标值大于现有值,那么是增长(需要向上取整),没有则变小(需要向下取整)
                        let speed = targetVal > currentVal ?
                                Math.ceil((targetVal - currentVal)/denominator) : Math.floor((targetVal - currentVal)/denominator);

                        oDiv.style.width = currentVal + speed + 'px';
                    }else {
                        clearInterval(oDiv.timer);
                    }

                    //自己玩的,到顶了就变个色,
                    if (currentVal !== 300) {
                        if (currentVal === 100) oDiv.style.background = 'coral';
                        else oDiv.style.background = 'chocolate'
                    }
                    else oDiv.style.background = 'sienna';
                },30);
            }


            //渐变的框架,可以适配透明度和带px的属性; 传入当前div对象,当前属性值,目标属性值,需改变属性,最后是渐变速率(呈反比)
            function divChange(oDiv,currentVal,targetVal,prop,denominator = 5) {
                currentVal = parseFloat(currentVal);    //因为从oDiv.style['opacity']获取出来的值是string...

                oDiv.timer = setInterval(function () {
                    if (currentVal !== targetVal) {

                        if (prop === 'opacity') {
                            //处理透明度,因为透明度是[0,1],所以乘以100
                            let speed = targetVal > currentVal ?
                                Math.ceil((targetVal * 100 - currentVal * 100) / denominator) : Math.floor((targetVal * 100 - currentVal * 100) / denominator);
                            currentVal += speed / 100;
                            oDiv.style[prop] = currentVal;

                            //因为是小数很难让2者完全相等,所以设置当到精度0.0001时使2者相等
                            if (Math.abs(currentVal - targetVal) <= 0.0001) currentVal = targetVal;

                        } else {
                            //处理带px的属性
                            let speed = targetVal > currentVal ?
                                Math.ceil((targetVal - currentVal) / denominator) : Math.floor((targetVal - currentVal) / denominator);
                            currentVal += speed;
                            oDiv.style[prop] = currentVal+ 'px';
                            console.log(oDiv.style[prop]);
                        }
                    } else {
                        clearInterval(oDiv.timer);
                        console.log('clear');
                    }
                }, 25);
            }
        };
        // 总结
        // 1.主要需要联想到可以设置多个timer,并且直接设置到对象的属性中
        // 2.连续多个运动练习都为了完善这个运动(变化)的框架(growthDiv),后续会继续完善,使得仅通过参数就可以完成变宽边长变大渐变等效果


    </script>

    <style>
        .div {
            width: 100px;
            height: 50px;
            margin-top: 30px;
            background: coral;
        }

    </style>
</head>

<body>

<div>
    <div class="div"></div>
    <div class="div"></div>
    <div class="div"></div>

</div>

</body>
</html>